<template>
    <div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="changeUpload"
            :on-preview="handlePictureCardPreview" :file-list="fileList">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog title="头像预览" :modal="false" :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
        };
    },
    methods: {
        changeUpload(file) {
            if (this.fileList.length == 1) {
                this.fileList.splice(0, 1, file);
            } else {
                this.fileList.push(file);
            }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 获取图片
        getImgStream() {
            return this.fileList;
        }
    }
}
</script>